<template>
	<view class="select-ticket">
		<view class="movie-header">
			<view class="movie-info">
				<view class="img-box">
					<image :src="movie?.img" mode="aspectFit"></image>
				</view>
				<view class="right">
					<view class="title">
						{{movie?.nm}}
					</view>
					<view class="author">
						{{movie?.enm}}
					</view>
					<view class="type">
						{{movie?.cat?.split(',')?.join("/")}}
					</view>
					<view class="my-text des">
						{{movie?.star}}
					</view>
					<view class="time">
						{{movie?.pubDesc}} / {{movie?.episodeDur}}分钟
					</view>
				</view>
			</view>
		</view>
		<view class="select-content">
			<view class="select-time">
				<view>
					<view class="select-time-item" :class="{'active':index==selectDateActive}"
						v-for="(item,index) in selectDate" :key="index" @click="selectDateActive=index">
						{{item.date}}
					</view>
				</view>
			</view>
			<select-cinema :movie="movie" :date="selectDate[selectDateActive]?.date"></select-cinema>
		</view>
	</view>
</template>

<script setup>
	import {
		useMovieStore,
	} from "@/stores/movie.js";
	import {
		useGlobalStore
	} from "@/stores/global.js"
	import {
		onMounted,
		ref,
		watch
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getMovieSelect,
		getMovieTime
	} from "@/api/index.js"
	const store = useMovieStore();
	const cityStore = useGlobalStore();
	console.log(store.movie);
	const movie = ref({});
	movie.value = store.movie.value;
	const options = ref({});
	const selectOptions = ref({});
	const selectDate = ref([]);
	const selectDateActive = ref(0);
	watch(()=>selectDateActive.value,()=>{
		options.value = {
			...options.value,
			date: selectDate.value[selectDateActive.value].date
		}
		console.log(options);
	});
	options.value = {
		movieId: movie.value.movieId
	}
	const getNowTime = ()=>{
		let allDate = '';
		let temp = new Date();
		let years = temp.getFullYear();
		let month = temp.getMonth() + 1;
		month = month > 10 ? month : "0" + month;
		let date = temp.getDate();
		date = date > 10 ? date : "0" + date;
		allDate = `${years}-${month}-${date}`;
		return allDate;
	}
	const getSelectData = async () => {
		let allDate = getNowTime();
		options.value = {
			...options.value,
			cityId: cityStore.city.id,
			date: allDate
		}
		let res = await getMovieSelect(options.value);
		selectOptions.value = res.data.data;
		console.log(selectOptions.value);
	}
	onLoad((opt) => {
		options.value = {
			...options.value,
			movieId: opt.movieId
		}
	});
	onMounted(async () => {
		// getSelectData();
		let res = await getMovieTime(options.value.movieId, cityStore.city.id);
		let allDate = getNowTime();
		selectDate.value = res.data.data.dates.slice(res.data.data.dates.findIndex(el=>el.date==allDate),);
		console.log(selectDate.value);
		options.value = {
			...options.value,
			date: selectDate.value[selectDateActive.value].date
		}
	})
</script>

<style lang="scss">
	.select-ticket {
		.movie-header {
			width: 100%;
			background-color: var(--brown2);
			padding: 0 20rpx;
			box-sizing: border-box;
			color: var(--white);
			padding-bottom: 40rpx;

			.movie-info {
				display: flex;
				justify-content: space-between;
				padding-top: 40rpx;

				.img-box {
					width: 232rpx;
					min-width: 232rpx;
					height: 320rpx;
					border-radius: 4rpx;

					image {
						width: 232rpx;
						height: 320rpx;
					}
				}

				.right {
					flex-grow: 1;
					margin-left: 10rpx;
					color: var(--white);

					>view {
						opacity: .5;
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.title {
						opacity: 1;
						font-size: 44rpx;
						color: var(--white);
						margin-bottom: 20rpx;
						padding: 0;
					}
				}
			}
		}

		.select-content {
			
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;

			.select-time {
				width: 100%;
				overflow: scroll;

				&::-webkit-scrollbar {
					display: none;
				}

				>view {
					width: max-content;
					display: flex;
					align-items: center;

					.select-time-item {
						opacity: .8;
						position: relative;
						width: 260rpx;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: var(--black);
						transition: .3s;

						&::after {
							position: absolute;
							content: '';
							left: 0;
							bottom: 0;
							width: 100%;
							height: 6rpx;
							border-radius: 3rpx;
							background-color: transparent;
							transition: .3s;
						}
					}

					.active {
						color: var(--red);
						&::after {
							background-color: var(--red);
						}
					}
				}
			}
		}
	}
</style>